---
section: Flexbox
title: Flex Shrink
slug: /docs/flex-shrink/
---

# Flex Shrink

Utilities for controlling how flex items shrink.

<carbon-ad />

| React props          | CSS Properties          |
| -------------------- | ----------------------- |
| `flexShrink={value}` | `flex-shrink: {value};` |

## Shrink

Use `flexShrink={1}` to allow a flex item to shrink if needed:

```jsx preview color=orange
<>
  <template preview>
    <x.div display="flex" spaceX={3} w={250} mx="auto">
      <x.div
        flexGrow={1}
        h={16}
        w={16}
        px={5}
        borderRadius="md"
        bg="orange-400"
        color="white"
        display="flex"
        alignItems="center"
        justifyContent="center"
        fontSize="2xl"
        fontWeight="extrabold"
      >
        ~
      </x.div>
      <x.div
        flexShrink={1}
        h={16}
        w={900}
        px={5}
        borderRadius="md"
        bg="orange-500"
        color="white"
        display="flex"
        alignItems="center"
        justifyContent="center"
        fontSize="2xl"
        fontWeight="extrabold"
      >
        ~
      </x.div>
      <x.div
        flexGrow={1}
        h={16}
        w={16}
        px={5}
        borderRadius="md"
        bg="orange-400"
        color="white"
        display="flex"
        alignItems="center"
        justifyContent="center"
        fontSize="2xl"
        fontWeight="extrabold"
      >
        ~
      </x.div>
    </x.div>
  </template>
  <x.div display="flex">
    <x.div flexGrow={1} w={16}>
      {/* This item will grow or shrink as needed */}
    </x.div>
    <x.div flexShrink={1} w={900}>
      {/* This item will shrink */}
    </x.div>
    <x.div flexGrow={1} w={16}>
      {/* This item will grow or shrink as needed */}
    </x.div>
  </x.div>
</>
```

## Don't shrink

Use `flexShrink={0}` to prevent a flex item from shrinking:

```jsx preview color=light-blue
<>
  <template preview>
    <x.div display="flex" spaceX={3} mx="auto">
      <x.div
        flexGrow={1}
        h={16}
        w={16}
        px={5}
        borderRadius="md"
        bg="light-blue-400"
        color="white"
        display="flex"
        alignItems="center"
        justifyContent="center"
        fontSize="2xl"
        fontWeight="extrabold"
      >
        ~
      </x.div>
      <x.div
        flexShrink={0}
        h={16}
        w={32}
        px={5}
        borderRadius="md"
        bg="light-blue-500"
        color="white"
        display="flex"
        alignItems="center"
        justifyContent="center"
        fontSize="2xl"
        fontWeight="extrabold"
      >
        ~
      </x.div>
      <x.div
        flexGrow={1}
        h={16}
        w={16}
        px={5}
        borderRadius="md"
        bg="light-blue-400"
        color="white"
        display="flex"
        alignItems="center"
        justifyContent="center"
        fontSize="2xl"
        fontWeight="extrabold"
      >
        ~
      </x.div>
    </x.div>
  </template>
  <x.div display="flex">
    <x.div flexGrow={1} w={16}>
      {/* This item will grow or shrink as needed */}
    </x.div>
    <x.div flexShrink={0} w={32}>
      {/* This item will not shrink below its initial size */}
    </x.div>
    <x.div flexGrow={1} w={16}>
      {/* This item will grow or shrink as needed */}
    </x.div>
  </x.div>
</>
```

## Responsive

To control how a flex item shrinks at a specific breakpoint, use responsive object notation. For example, adding the property `flexShrink={{ md: 0 }}` to an element would apply the `flexShrink={0}` utility at medium screen sizes and above.

```jsx
<x.div flexShrink={{ md: 0 }} />
```

For more information about xstyled's responsive design features, check out [Responsive Design](/docs/responsive-design/) documentation.
